<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
    <script type="text/javascript" src="../static/jquery.min.js?v=2.1.4"></script>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement;
            resizeEvt = 'orienttaionchange' in window ? 'orienttaionchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    console.log($('table').eq(0).width());
                    if (clientWidth >= 640) {
                        docEl.style.fontSize = '100' + 'px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                    $('img').each(function () {
                        if ($(this).width() > clientWidth) {
                            $(this).width(clientWidth - 26);
                        }
                    });
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);

            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <style>
        body {
            padding: 3px 5px;
            margin: 3px;
            font-size: 0.3rem;

        }

        a, ul, li, tr, td, th, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, u, font, b {
            word-wrap: break-word;
        }

        img {
            border: 0
        }

        a {
            color: #337ab7;
            text-decoration: none;
        }

        a:hover {
            color: #337ab7;
            text-decoration: underline;
        }

        h1 {
            font-size: 0.6rem;

        }

        h2 {
            font-size: 0.5rem;

        }

        h3 {
            font-size: 0.4rem;

        }

        h4 {
            font-size: 0.35rem;
        }

        h5 {
            font-size: 0.3rem;

        }

        h6 {
            font-size: 0.25rem;

        }

        blockquote {
            border-left: 7px solid #eee;
            padding-left: 10px;
        }

        img {
            margin: 8px;

        }

        table, th, tr, td {
            border: 1px solid black;
            padding: 3px;

        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;

        }

        td {
            width: auto;
            word-wrap: break-word;

        }

        #tit-wx {
            text-indent: 6px;
            font-size: 0.25rem;
            margin: 0;
            padding: 5px;

        }
    </style>

    <title>登录</title>
</head>
<body>
<div class="container" style="margin-top: 3rem">
    <h2 class="text-center" style="color: #337ab7; margin-bottom: 1rem">XXX人员登陆</h2>
    <form class="form-horizontal" role="form">
        <div class="input-group">
            <span class="input-group-addon">账号</span>
            <input type="text" id="account" class="form-control" placeholder="请输入账号">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">密码</span>
            <input type="password" id="pwd" class="form-control" placeholder="请输入密码">
        </div>
        <br>
        <p id="msg">${msg}</p>
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-4">
                <button type="submit" id="commitAjax" class="btn btn-primary btn-lg">登录</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $("#commitAjax").click(function () {
            var msg = $("#msg");
            msg.val("");
            var account = $("#account").val();
            var pwd = $("#pwd").val();
            if (account.length != 11) {
                msg.val("账号是你的手机，请输入！");
                alert("账号是你的手机，请输入！")
                return;
            }
            if (pwd.length != 6) {
                msg.val("密码为你手机后六位！");
                return;
            }
            $.ajax({
                url: "http://localhost:8081/jpa/user/login",
                type: "post",
                dataType: "json",
                data: {account: account, pwd: pwd}
            });
        });
    })

</script>
</html>